﻿<ClientManagerView:EventResourceDictionary x:Class="FacebookClient.PhotoViewerEventResourceDictionary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ClientManager="clr-namespace:ClientManager"
    xmlns:ClientManagerControls="clr-namespace:ClientManager.Controls"
    xmlns:ClientManagerView="clr-namespace:ClientManager.View"
    xmlns:FacebookClient="clr-namespace:FacebookClient"
    xmlns:TextSelection="clr-namespace:Microsoft.Wpf.Samples.Documents" >

  <FacebookClient:DateTimeToStringConverter x:Key="DateTimeConverter"/>
  <FacebookClient:MultiValueAggregator x:Key="MultiAggregator" />
  <FacebookClient:IsStringNullOrWhitespaceConverter x:Key="IsStringNullOrWhitespaceConverter" />

  <ItemsPanelTemplate x:Key="VirtualizedItemsPanelTemplate">
    <VirtualizingStackPanel />
  </ItemsPanelTemplate>

  <!-- Data template for photos in the film strip -->
  <DataTemplate x:Key="FilmStripItemTemplate">
    <ClientManagerControls:FacebookImageDragContainer FacebookImage="{Binding Image}">
      <Button
          Height="80" Width="80"
          Click="OnNavigateToContentButtonClicked"
          ClientManagerView:ViewManager.NavigationContent="{Binding}"
          FocusVisualStyle="{x:Null}"
          Cursor="Hand"
          Focusable="False">
        <Button.Template>
          <ControlTemplate>
            <Border x:Name="ButtonBorder"
                BorderThickness="0"
                CornerRadius="0"
                RenderTransformOrigin="0.5,0.99">
              <Border.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1"/>
                </TransformGroup>
              </Border.RenderTransform>
              <ContentControl Margin="3" Template="{DynamicResource StandardPhotoChromeContentControlTemplate}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                <ClientManagerControls:FacebookImageControl FacebookImage="{Binding Image}" FacebookImageDimensions="Normal">
                  <ClientManagerControls:FacebookImageControl.Template>
                    <ControlTemplate TargetType="{x:Type ClientManagerControls:FacebookImageControl}">
                      <Grid Margin="4,4,4,11">
                        <Border x:Name="PlaceholderBorder" Background="Black" Visibility="Collapsed" />
                        <Image x:Name="MainImage"
                            VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            Stretch="Uniform" 
                            Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSource}" />
                      </Grid>
                      <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=ImageSource}" Value="{x:Null}">
                          <Setter TargetName="MainImage" Property="Visibility" Value="Collapsed" />
                          <Setter TargetName="PlaceholderBorder" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                      </ControlTemplate.Triggers>
                    </ControlTemplate>
                  </ClientManagerControls:FacebookImageControl.Template>
                </ClientManagerControls:FacebookImageControl>
              </ContentControl>
            </Border>
          </ControlTemplate>
        </Button.Template>
      </Button>
    </ClientManagerControls:FacebookImageDragContainer>
  </DataTemplate>

  <!-- Color overrides for the film strip -->
  <Style x:Key="FilmStripStyle">
    <Style.Resources>
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
    </Style.Resources>
  </Style>

  <!-- ItemsPanel used to animate the currently selected photo into view -->
  <ItemsPanelTemplate x:Key="FilmStripPanel">
    <FacebookClient:FilmStripPanel ItemHeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type FacebookClient:FilmStripControl}}, Path=ItemHeight}"/>
  </ItemsPanelTemplate>

  <!-- Animations for the photos in the film strip -->
  <Style x:Key="FilmStripItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid
              HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
              Background="Transparent"
              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}">
            <ContentPresenter x:Name="Presenter"
                Content="{TemplateBinding ContentControl.Content}"
                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                RenderTransformOrigin="0.5,0.5">
              <ContentPresenter.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1"/>
                </TransformGroup>
              </ContentPresenter.RenderTransform>
            </ContentPresenter>
          </Grid>
          <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True">
              <Setter Property="Panel.ZIndex" Value="10" />
              <DataTrigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                      <SplineDoubleKeyFrame KeySpline="0,0,0.875,1" KeyTime="00:00:00" Value="0.5"/>
                      <SplineDoubleKeyFrame KeySpline="0.125,0,0.875,1" KeyTime="00:00:00.100" Value="1.5"/>
                      <SplineDoubleKeyFrame KeyTime="00:00:00.150" Value="1.4"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                      <SplineDoubleKeyFrame KeySpline="0,0,0.875,1" KeyTime="00:00:00" Value="0.5"/>
                      <SplineDoubleKeyFrame KeySpline="0.125,0,0.875,1" KeyTime="00:00:00.100" Value="1.5"/>
                      <SplineDoubleKeyFrame KeyTime="00:00:00.150" Value="1.4"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </BeginStoryboard>
              </DataTrigger.EnterActions>
              <DataTrigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation
                        Duration="00:00:00.100"
                        Storyboard.TargetName="Presenter"
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                        To="1"/>
                    <DoubleAnimation
                        Duration="00:00:00.100"
                        Storyboard.TargetName="Presenter"
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                        To="1"/>
                  </Storyboard>
                </BeginStoryboard>
              </DataTrigger.ExitActions>
            </DataTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Style.Triggers>
      <!-- Ensure the ListBoxItem is at the top of the ZIndex on MouseOver or else it will overlap with 
           adjacent ListBoxItems when it is zoomed-in during selection. -->
      <Trigger Property="IsMouseOver" Value="true">
        <Setter Property="Panel.ZIndex" Value="1"/>
      </Trigger>
    </Style.Triggers>
  </Style>

  <ItemsPanelTemplate x:Key="PhotoTagPanel">
    <WrapPanel IsItemsHost="True"/>
  </ItemsPanelTemplate>

  <Style TargetType="{x:Type FacebookClient:PhotoDisplayControl}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type FacebookClient:PhotoDisplayControl}">
          <Canvas x:Name="PART_ManipulationCanvas">
            <ContentControl x:Name="PART_PhotoFrameControl"
                Template="{DynamicResource StandardPhotoChromeContentControlTemplate}" 
                Padding="8" >
              <ClientManagerControls:FacebookImageControl x:Name="PART_PhotoImage"
                  FacebookImage="{Binding FacebookPhoto.Image}" 
                  FacebookImageDimensions="Big">
                <ClientManagerControls:FacebookImageControl.Template>
                  <ControlTemplate TargetType="{x:Type ClientManagerControls:FacebookImageControl}">
                    <Image Source="{TemplateBinding ImageSource}"/>
                  </ControlTemplate>
                </ClientManagerControls:FacebookImageControl.Template>
                <ClientManagerControls:FacebookImageControl.ContextMenu>
                  <ContextMenu StaysOpen="true">
                    <MenuItem Command="FacebookClient:PhotoViewerControl.SetAsDesktopBackgroundCommand" CommandParameter="{Binding}" Header="Set as Desktop _Background"/>
                    <MenuItem Command="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.SaveAlbumCommand}" CommandParameter="{Binding Path=FacebookPhoto.Album}" Header="Save _Album..."/>
                    <MenuItem Command="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.SavePhotoCommand}" CommandParameter="{Binding Path=FacebookPhoto}" Header="_Save..."/>
                    <Separator/>
                    <MenuItem Command="ApplicationCommands.Print" Header="_Print..."/>
                    <Separator/>
                    <MenuItem
                        Command="FacebookClient:PhotoDisplayControl.ZoomPhotoInCommand"
                        CommandParameter="{Binding}"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}"
                        Header="Zoom _In"
                        InputGestureText="Ctrl++"/>
                    <MenuItem
                        Command="FacebookClient:PhotoDisplayControl.ZoomPhotoOutCommand"
                        CommandParameter="{Binding}"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}"
                        Header="Zoom _Out"
                        InputGestureText="Ctrl+-"/>
                  </ContextMenu>
                </ClientManagerControls:FacebookImageControl.ContextMenu>
              </ClientManagerControls:FacebookImageControl>
            </ContentControl>
          </Canvas>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="TopToolbarButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="24"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Border
                x:Name="hover"
                Background="{DynamicResource PhotoViewerToolbarButtonSelectedBrush}"
                BorderBrush="{DynamicResource PhotoViewerToolbarButtonSelectedBrush}"
                BorderThickness="1"
                CornerRadius="3"
                Opacity="0"/>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetName="hover" Storyboard.TargetProperty="Opacity" To="1"/>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetName="hover" Storyboard.TargetProperty="Opacity" To="0"/>
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="AlbumStripStyle" TargetType="{x:Type Control}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Control}">
          <!-- FilmStripPanel requires a non-Infinite width.  Putting it in a grid like this is sufficient to get it to calculate correctly. -->
          <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="FilmStripBlurEffectArea"
                  Background="{DynamicResource FriendBarBackgroundBrush}"
                  BorderThickness="0,2,0,0"
                  BorderBrush="{DynamicResource FriendBarBorderBrush}"
                  OpacityMask="{DynamicResource PhotoStripOpacityMask}"
                  Height="112">
              <FacebookClient:FilmStripControl
                x:Name="PART_FilmStrip"
                Background="Transparent"
                Focusable="False"
                ItemContainerStyle="{StaticResource FilmStripItemStyle}"
                VerticalContentAlignment="Center"
                ItemHeight="80"
                ItemsPanel="{StaticResource FilmStripPanel}"
                ItemsSource="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActivePhotoAlbum.Photos}"
                ItemTemplate="{StaticResource FilmStripItemTemplate}"
                Padding="0"
                ScrollViewer.CanContentScroll="True"
                SelectedItem="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActivePhoto, Mode=OneWay}"
                Style="{StaticResource FilmStripStyle}"/>
            </Border>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PhotoViewerToolbarStyle" TargetType="{x:Type Control}">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Control}">
          <StackPanel
              x:Name="ToolbarButtons"
              HorizontalAlignment="Center"
              Margin="10"
              Orientation="Horizontal">
            <Button
                Command="FacebookClient:PhotoDisplayControl.ZoomPhotoOutCommand"
                CommandParameter="{Binding}"
                CommandTarget="{Binding ElementName=PART_PhotoDisplay}"
                Style="{DynamicResource TopToolbarButtonStyle}"
                ToolTip="Zoom the photo out">
              <Rectangle Margin="4 0" Height="16" Width="16" Fill="{DynamicResource ZoomOutDrawingBrush}"/>
            </Button>

            <Button
                Command="FacebookClient:PhotoDisplayControl.FitPhotoToWindowCommand"
                CommandParameter="{Binding}"
                CommandTarget="{Binding ElementName=PART_PhotoDisplay}"
                Style="{DynamicResource TopToolbarButtonStyle}"
                ToolTip="Fit the photo to the window size">
              <Rectangle Height="16" Width="16" Fill="{DynamicResource ZoomMagnifyingGlassToolbarDrawingBrush}"/>
            </Button>
            <Button
                Command="FacebookClient:PhotoDisplayControl.ZoomPhotoInCommand"
                CommandParameter="{Binding}"
                CommandTarget="{Binding ElementName=PART_PhotoDisplay}"
                Style="{DynamicResource TopToolbarButtonStyle}"
                ToolTip="Zoom the photo in">
              <Rectangle Height="16" Width="16" Fill="{DynamicResource ZoomInDrawingBrush}"/>
            </Button>
            <Rectangle
                Width="1"
                Height="17"
                Margin="5,0,5,0"
                VerticalAlignment="Center"
                Fill="{DynamicResource ToolbarIconForegroundBrush}"
                SnapsToDevicePixels="True"/>
            <Button
                Margin="0,0,3,0"
                Command="ApplicationCommands.Print"
                Style="{DynamicResource TopToolbarButtonStyle}"
                ToolTip="Print the photo">
              <Rectangle Height="16" Width="16" Fill="{DynamicResource PrinterToolbarDrawingBrush}"/>
            </Button>
            <Button
                Command="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.SavePhotoCommand}" 
                CommandParameter="{Binding Path=FacebookPhoto}"
                Style="{DynamicResource TopToolbarButtonStyle}"
                ToolTip="Save the photo">
              <Rectangle Height="16" Width="16" Fill="{DynamicResource SaveDiskToolbarDrawingBrush}" />
            </Button>
            <Rectangle
                Width="1"
                Height="17"
                Margin="5,0,5,0"
                VerticalAlignment="Center"
                Fill="{DynamicResource ToolbarIconForegroundBrush}"
                SnapsToDevicePixels="True"/>
            <Button 
                Command="FacebookClient:PhotoViewerControl.StartSlideShowCommand" 
                CommandParameter="{Binding}" 
                Style="{DynamicResource TopToolbarButtonStyle}" 
                ToolTip="Slide Show">
              <Rectangle Height="16" Width="16" Fill="{DynamicResource SlideShowToolbarDrawingBrush}"/>
            </Button>
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="AlbumInformationStyle" TargetType="{x:Type Control}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Control}">
          <StackPanel>
            <TextBlock FontFamily="{DynamicResource SansSerifFont}" FontWeight="Bold" FontSize="{DynamicResource LargeFontSize3}" Foreground="{DynamicResource ActivityPostUserNameForeground}" TextWrapping="Wrap">
              <Hyperlink Click="OnNavigateToContentButtonClicked" ClientManagerView:ViewManager.NavigationContent="{Binding Owner}">
                <Run Text="{Binding Owner.Name, Mode=OneWay}"/>
              </Hyperlink>
            </TextBlock>
            <TextBlock FontFamily="{DynamicResource SansSerifFont}" FontWeight="Regular" FontSize="{DynamicResource LargeFontSize3}" Foreground="{DynamicResource PhotoViewerAlbumNameForeground}" TextWrapping="Wrap">
              <Hyperlink Click="OnNavigateToContentButtonClicked" ClientManagerView:ViewManager.NavigationContent="{Binding}">
                <Run Text="{Binding Title, Mode=OneWay}"/>
              </Hyperlink>
            </TextBlock>

            <TextBlock Style="{DynamicResource CreatedTextBlockStyle}">
              <TextBlock.Text>
                <Binding StringFormat="{}Last updated {0}" Path="LastModified" Converter="{StaticResource DateTimeConverter}"/>
              </TextBlock.Text>
            </TextBlock>
            <TextBlock Style="{DynamicResource CreatedTextBlockStyle}">
              <TextBlock>
                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                      <Setter Property="Text">
                        <Setter.Value>
                          <Binding StringFormat="{}{0} photos" Path="Photos.Count"/>
                        </Setter.Value>
                      </Setter>
                    
                      <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=Photos.Count}" Value="1">
                          <Setter Property="Text" Value="1 photo" />
                        </DataTrigger>
                      </Style.Triggers>
                    </Style>
                </TextBlock.Style>
              </TextBlock>
            </TextBlock>
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PhotoDescriptionStyle" TargetType="{x:Type Control}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Control}">
          <ScrollViewer x:Name="PhotoDescription"
              DockPanel.Dock="Bottom"
              MaxHeight="60"
              MaxWidth="800"
              HorizontalAlignment="Center"
              Margin="10"
              VerticalAlignment="Bottom"
              Focusable="False"
              HorizontalScrollBarVisibility="Disabled"
              Style="{StaticResource MainScrollViewerStyle}"
              VerticalScrollBarVisibility="Auto">
            <Border VerticalAlignment="Center" Background="Transparent" Padding="10">
              <StackPanel>
                <TextBlock
                  VerticalAlignment="Top"
                  FontFamily="{DynamicResource SansSerifFont}"
                  FontSize="{DynamicResource MiddleFontSize}"
                  TextSelection:TextSelection.IsEnabled="True"
                  FontWeight="Medium"
                  TextWrapping="Wrap">
                  <FacebookClient:HyperlinkTextContent Foreground="{DynamicResource PhotoCaptionForeground}" Text="{Binding Path=FacebookPhoto.Caption}"/></TextBlock>
                <ItemsControl ItemsPanel="{StaticResource PhotoTagPanel}" ItemsSource="{Binding Path=FacebookPhoto.Tags}">
                  <ItemsControl.ItemTemplate>
                    <DataTemplate>
                      <FacebookClient:FacebookPhotoTagControl/>
                    </DataTemplate>
                  </ItemsControl.ItemTemplate>
                </ItemsControl>
              </StackPanel>
            </Border>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- PhotoViewer very narrow control template -->
  <ControlTemplate x:Key="PhotoViewerTemplate_VeryNarrow" TargetType="{x:Type FacebookClient:PhotoViewerControl}">
    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}">
      <!-- Place the photo under all other controls, but allow it to fill the full page. -->
      <Grid x:Name="PART_PhotoDisplayGrid">
        <FacebookClient:PhotoDisplayControl x:Name="PART_PhotoDisplay"
            FacebookPhoto="{TemplateBinding FacebookPhoto}" 
            RenderTransformOrigin="0.5,0.5"/>
        <FacebookClient:PhotoTaggerControl x:Name="PART_PhotoTaggerControl"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            PhotoAlbum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FacebookPhoto.Album}"
            Visibility="Collapsed"/>
        <FacebookClient:TagTarget x:Name="PART_TagTargetElement"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Visibility="Collapsed"/>
      </Grid>

      <DockPanel>
        <Control DockPanel.Dock="Bottom" Style="{StaticResource AlbumStripStyle}"/>

        <Control DockPanel.Dock="Top" Style="{StaticResource PhotoViewerToolbarStyle}"/>

        <Control DockPanel.Dock="Bottom" Style="{StaticResource PhotoDescriptionStyle}"/>

        <Control x:Name="PART_FitPhotoFrame" MinHeight="180" MinWidth="200"/>
      </DockPanel>
    </Grid>
  </ControlTemplate>

  <!-- PhotoViewer narrow control template -->
  <ControlTemplate x:Key="PhotoViewerTemplate_Narrow" TargetType="{x:Type FacebookClient:PhotoViewerControl}">
    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}">
      <!-- Place the photo under all other controls, but allow it to fill the full page. -->
      <Grid x:Name="PART_PhotoDisplayGrid">
        <FacebookClient:PhotoDisplayControl x:Name="PART_PhotoDisplay"
            FacebookPhoto="{TemplateBinding FacebookPhoto}" 
            RenderTransformOrigin="0.5,0.5"/>
        <FacebookClient:PhotoTaggerControl x:Name="PART_PhotoTaggerControl"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            PhotoAlbum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FacebookPhoto.Album}"
            Visibility="Collapsed"/>
        <FacebookClient:TagTarget x:Name="PART_TagTargetElement"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Visibility="Collapsed"/>
      </Grid>

      <DockPanel>
        <Control DockPanel.Dock="Bottom" Style="{StaticResource AlbumStripStyle}"/>

        <!-- photo contact info and comments -->
        <DockPanel
            Margin="10"
            DockPanel.Dock="Left"
            VerticalAlignment="Top"
            Width="220"
            HorizontalAlignment="Left">
          <Control DockPanel.Dock="Top"
              DataContext="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActivePhotoAlbum}"
              Style="{StaticResource AlbumInformationStyle}" />

          <ScrollViewer
              Margin="0,5,0,0"
              VerticalAlignment="Center"
              HorizontalAlignment="Stretch"
              VerticalScrollBarVisibility="Auto">
            <Border Background="{DynamicResource NewsFeedCommentBackgroundBrush}" CornerRadius="6">
              <StackPanel>
                <ItemsControl
                    x:Name="CommentsList"
                    Margin="10,0"
                    ItemsPanel="{StaticResource VirtualizedItemsPanelTemplate}"
                    ItemsSource="{Binding FacebookPhoto.Comments}"
                    ItemTemplate="{StaticResource NewsFeedCommentNarrowTemplate}"/>
                <StackPanel Margin="7,5,0,7">
                  <FacebookClient:CommandTextBox x:Name="CommentTextBox" Margin="5,0" Panel.ZIndex="1" CommitCommand="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.AddCommentToPhotoCommand}" FontSize="{DynamicResource MiddleFontSize}" SpellCheck.IsEnabled="True" TextWrapping="Wrap">
                    <FacebookClient:CommandTextBox.Style>
                      <Style BasedOn="{StaticResource CommentTextBoxStyle}" TargetType="{x:Type FacebookClient:CommandTextBox}">
                        <Setter Property="BannerText" Value="Add to the conversation" />
                        <Style.Triggers>
                          <DataTrigger Binding="{Binding ElementName=CommentsList, Path=HasItems}" Value="False">
                            <Setter Property="BannerText" Value="Start a conversation" />
                          </DataTrigger>
                        </Style.Triggers>
                      </Style>
                    </FacebookClient:CommandTextBox.Style>
                    <FacebookClient:CommandTextBox.CommitCommandParameter>
                      <MultiBinding Converter="{StaticResource MultiAggregator}">
                        <Binding Path="FacebookPhoto" />
                        <Binding ElementName="CommentTextBox" Path="Text" />
                      </MultiBinding>
                    </FacebookClient:CommandTextBox.CommitCommandParameter>
                  </FacebookClient:CommandTextBox>
                  <Button Style="{DynamicResource StandardButtonStyle}" IsEnabled="{Binding ElementName=CommentTextBox, Path=Text, Converter={StaticResource IsStringNullOrWhitespaceConverter}, ConverterParameter=Inverse}" Margin="10,4,4,0" Height="22" HorizontalAlignment="Right" Panel.ZIndex="0" Command="{x:Static FacebookClient:CommandTextBox.DoCommitCommand}" CommandTarget="{Binding ElementName=CommentTextBox}" Content="Comment" FontSize="{DynamicResource MiddleFontSize}">
                    <Button.CommandParameter>
                      <MultiBinding Converter="{StaticResource MultiAggregator}">
                        <Binding Path="FacebookPhoto" />
                        <Binding ElementName="CommentTextBox" Path="Text" />
                      </MultiBinding>
                    </Button.CommandParameter>
                  </Button>
                </StackPanel>
              </StackPanel>
            </Border>
          </ScrollViewer>
        </DockPanel>

        <Control DockPanel.Dock="Top" Style="{StaticResource PhotoViewerToolbarStyle}"/>

        <Control DockPanel.Dock="Bottom" Style="{StaticResource PhotoDescriptionStyle}"/>

        <Control x:Name="PART_FitPhotoFrame" MinHeight="180" MinWidth="200"/>
      </DockPanel>
    </Grid>
  </ControlTemplate>

  <!-- PhotoViewer wide control template -->
  <ControlTemplate x:Key="PhotoViewerTemplate_Wide" TargetType="{x:Type FacebookClient:PhotoViewerControl}">
    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}">
      <!-- Place the photo under all other controls, but allow it to fill the full page. -->
      <Grid x:Name="PART_PhotoDisplayGrid">
        <FacebookClient:PhotoDisplayControl x:Name="PART_PhotoDisplay"
            FacebookPhoto="{TemplateBinding FacebookPhoto}" 
            RenderTransformOrigin="0.5,0.5"/>
        <FacebookClient:PhotoTaggerControl x:Name="PART_PhotoTaggerControl"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            PhotoAlbum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FacebookPhoto.Album}"
            Visibility="Collapsed"/>
        <FacebookClient:TagTarget x:Name="PART_TagTargetElement"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Visibility="Collapsed"/>
      </Grid>

      <DockPanel>
        <!-- Filmstrip -->
        <Control DockPanel.Dock="Bottom" Style="{StaticResource AlbumStripStyle}"/>

        <!-- photo contact info -->
        <StackPanel 
            DockPanel.Dock="Left"
            Orientation="Vertical" 
            Margin="10"
            Width="200" 
            DataContext="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActivePhotoAlbum}">
          <FacebookClient:FriendButton 
              Friend="{Binding Owner}" 
              Margin="10"
              Click="OnNavigateToContentButtonClicked" 
              ClientManagerView:ViewManager.NavigationContent="{Binding Owner}" 
              Style="{DynamicResource MediumFriendButtonStyle}"
              VerticalAlignment="Top" 
              HorizontalAlignment="Left"/>
          <Control Style="{StaticResource AlbumInformationStyle}" />
        </StackPanel>

        <!-- Comments -->
        <ScrollViewer
            DockPanel.Dock="Right"
            Margin="0,10,10,10"
            Width="250"
            VerticalAlignment="Center"
            VerticalScrollBarVisibility="Auto">
          <Border Background="{DynamicResource NewsFeedCommentBackgroundBrush}" CornerRadius="6">
            <StackPanel>
              <ItemsControl
                x:Name="CommentsList"
                Margin="10,0"
                ItemsPanel="{StaticResource VirtualizedItemsPanelTemplate}"
                ItemsSource="{Binding FacebookPhoto.Comments}"
                ItemTemplate="{StaticResource NewsFeedCommentNarrowTemplate}"/>
              <StackPanel Margin="7,5,0,7">
                <FacebookClient:CommandTextBox x:Name="CommentTextBox" Margin="5,0" Panel.ZIndex="1" CommitCommand="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.AddCommentToPhotoCommand}" FontSize="{DynamicResource MiddleFontSize}" SpellCheck.IsEnabled="True" TextWrapping="Wrap">
                  <FacebookClient:CommandTextBox.Style>
                    <Style BasedOn="{StaticResource CommentTextBoxStyle}" TargetType="{x:Type FacebookClient:CommandTextBox}">
                      <Setter Property="BannerText" Value="Add to the conversation" />
                      <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=CommentsList, Path=HasItems}" Value="False">
                          <Setter Property="BannerText" Value="Start a conversation" />
                        </DataTrigger>
                      </Style.Triggers>
                    </Style>
                  </FacebookClient:CommandTextBox.Style>
                  <FacebookClient:CommandTextBox.CommitCommandParameter>
                    <MultiBinding Converter="{StaticResource MultiAggregator}">
                      <Binding Path="FacebookPhoto" />
                      <Binding ElementName="CommentTextBox" Path="Text" />
                    </MultiBinding>
                  </FacebookClient:CommandTextBox.CommitCommandParameter>
                </FacebookClient:CommandTextBox>
                <Button Style="{DynamicResource StandardButtonStyle}" IsEnabled="{Binding ElementName=CommentTextBox, Path=Text, Converter={StaticResource IsStringNullOrWhitespaceConverter}, ConverterParameter=Inverse}" Margin="10,4,4,0" Height="22" HorizontalAlignment="Right" Panel.ZIndex="0" Command="{x:Static FacebookClient:CommandTextBox.DoCommitCommand}" CommandTarget="{Binding ElementName=CommentTextBox}" Content="Comment" FontSize="{DynamicResource MiddleFontSize}">
                  <Button.CommandParameter>
                    <MultiBinding Converter="{StaticResource MultiAggregator}">
                      <Binding Path="FacebookPhoto" />
                      <Binding ElementName="CommentTextBox" Path="Text" />
                    </MultiBinding>
                  </Button.CommandParameter>
                </Button>
              </StackPanel>
            </StackPanel>
          </Border>
        </ScrollViewer>

        <Control DockPanel.Dock="Top" Style="{StaticResource PhotoViewerToolbarStyle}"/>

        <!-- Photo description/tags -->
        <Control DockPanel.Dock="Bottom" Style="{StaticResource PhotoDescriptionStyle}"/>

        <Control x:Name="PART_FitPhotoFrame" MinHeight="180" MinWidth="200" />
      </DockPanel>
    </Grid>
  </ControlTemplate>

  <ClientManagerControls:SizeControlTemplateCollection x:Key="PhotoViewerTemplateCollection">
    <ClientManagerControls:SizeControlTemplate MaxWidth="700"                Template="{StaticResource PhotoViewerTemplate_VeryNarrow}"/>
    <ClientManagerControls:SizeControlTemplate MaxWidth="975" MinWidth="700" Template="{StaticResource PhotoViewerTemplate_Narrow}"/>
    <ClientManagerControls:SizeControlTemplate                MinWidth="975" Template="{StaticResource PhotoViewerTemplate_Wide}"/>
  </ClientManagerControls:SizeControlTemplateCollection>

  <Style TargetType="{x:Type FacebookClient:PhotoViewerControl}">
    <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Templates" Value="{StaticResource PhotoViewerTemplateCollection}"/>
  </Style>

</ClientManagerView:EventResourceDictionary>
